<template>
  <div class="order-detail-footer-container">
    <div class="main" :style="{ paddingBottom: `${bottomDistance}px` }">
      <div class="price">
        <div class="top">
          <div class="name">实际结算：</div>
          <div class="value">
            <nut-price
              v-if="buyType == 0"
              :price="info?.normalPayAmount"
              size="normal"
              :decimal-digits="2"
              :thousands="true"
            />
            <nut-price
              v-else
              :price="info?.quickPayAmount"
              size="normal"
              :decimal-digits="2"
              :thousands="true"
            />
          </div>
        </div>
        <!-- <div class="bottom">
          <div class="name">原价：</div>
          <div class="value">
            <nut-price
              :price="22.333"
              size="small"
              strike-through
              :decimal-digits="2"
              :thousands="true"
            />
          </div>
        </div> -->
      </div>
      <div class="btn">
        <nut-button
          block
          type="primary"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="gotoPay"
          >立即付款</nut-button
        >
      </div>
    </div>
  </div>
  <nut-dialog title="购票须知" v-model:visible="phoneInputVisible">
    <template v-slot:default>
      <div style="text-align: left">
        <div style="display: flex; text-align: left">
          1.付款成功后预计<span style="color: #ee0a24">1-60</span>分钟为您出票。
        </div>
        <div style="text-align: left; margin-top: 3px" v-html="tip"></div>
        <div style="margin-top: 3px">
          3.出票成功后系统将会通过公众号服务通知提醒您,点击进入查看取票信息,在影院任意自助机或者前台取票。
        </div>
        <div style="margin-top: 3px">4.用户下单即同意。</div>
        <div style="color: #ee0a24; margin-top: 3px">《抖票票用户协议》</div>
      </div>

      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
        "
      >
        <div style="width: 10px">
          <nut-checkbox v-model="checked"></nut-checkbox>
        </div>
        <div>我已经阅读并已同意以上协议</div>
      </div>
    </template>
    <template v-slot:footer>
      <nut-row :gutter="10">
        <nut-col :span="12">
          <div class="flex-content">
            <nut-button
              type="default"
              block
              @click="
                () => {
                  phoneInputVisible = false;
                  checked = false;
                }
              "
              >取消</nut-button
            >
          </div>
        </nut-col>
        <nut-col :span="12">
          <div class="flex-content flex-content-light">
            <nut-button
              :disabled="!checked"
              type="primary"
              block
              @click="onConfirmPay"
              >确定</nut-button
            >
          </div>
        </nut-col>
      </nut-row>
    </template>
  </nut-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, computed, toRefs } from "vue";
import Taro from "@tarojs/taro";
// import { tt } from "@tarojs/taro-tt";
// import { tt } from "@tarojs/plugin-platform-tt/dist/runtime-utils";
import { useTabbarStore } from "../../store";
import { storeToRefs } from "pinia";
import { IconFont } from "@nutui/icons-vue-taro";
import * as orderApi from "../../api/order";

const props = defineProps({
  info: Object,
  buyType: Number,
  auto_check_seat: Number,
});
const { info, buyType, auto_check_seat } = toRefs(props);
const tabbarStore = useTabbarStore();
const checked = ref(false);
const tip = ref("");
const phoneInputVisible = ref(false);
const onConfirmPay = async () => {
  phoneInputVisible.value = false;
  console.log(info.value.orderNo, buyType.value);
  var data = {
    order_number: info.value.orderNo.toString(),
    fast_buy: parseInt(buyType.value),
    auto_check_seat: parseInt(auto_check_seat.value),
  };
  console.log(data, "xiadansdf");
  const res = await orderApi.confirmOrder(data);
  console.log(res, "下单");
  tt.pay({
    orderInfo: {
      order_id: "6819903302604491021",
      order_token:
        "CgsIARCABRgBIAQoARJOCkx+WgXqCUIwTel2V3siEGZ0++poigIM+SMMxtMx798Vj0ZYzoTYBqeNslodUC9X5KAOHkR1YbSBz6I6pXATh5faIGy7R72A9vwm0OczGgA=",
    },
    service: 5,
    _debug: 1,
    success(res) {
      if (res.code == 0) {
        Taro.showToast({
          title: "支付成功",
        });
      }
      // 处理支付成功逻辑
    },
    fail(res) {
      console.log("支付失败", res);
      // 处理支付失败逻辑
    },
  });
  return;

  setTimeout(() => {
    Taro.redirectTo({
      url: `/pages/zhifu-detail/index?orderId=${info.value.id}`,
    });
  }, 1000);
};
const gotoPay = () => {
  tip.value =
    "2.此电影为特价票电影票,请确认购买时间和场次无误,付款成功将<span style='color: #ee0a24'>无法退票、改签</span>。";
  phoneInputVisible.value = true;
};

const { bottomDistance } = storeToRefs(tabbarStore);
onMounted(() => {
  setBottomDistance();
});
const setBottomDistance = () => {
  const systemInfo = Taro.getSystemInfoSync();
  const safeArea: any = systemInfo.safeArea;
  const res = systemInfo.screenHeight - safeArea.bottom;
  tabbarStore.setBottomDistance(res);
};
</script>
<style lang="scss">
.nut-popup {
  .nut-checkbox {
    // display: flex;
  }
}
.order-detail-footer-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .main {
    padding-left: 25px;
    padding-right: 25px;
    height: 120px;
    background: #fff;
    display: flex;
    flex-direction: row;
    .price {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-right: 25px;
      .top,
      .bottom {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .name {
          color: #858a99;
          font-size: 24px;
        }
        .value {
          height: 35px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
      .bottom {
        .nut-price {
          color: #858a99;
        }
      }
    }
    .btn {
      flex: 1;
      width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
